<template>
  <div>
    <el-breadcrumb>
      <el-breadcrumb-item to="/dashboard">首页</el-breadcrumb-item>
      <el-breadcrumb-item to="/post">文章列表</el-breadcrumb-item>
      <el-breadcrumb-item>修改文章</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="user-container">
      <el-form
        :model="form"
        :rules="rules"
        ref="form"
        label-width="100px"
        class="demo-form"
      >
        <el-form-item label="文章标题" prop="title">
          <el-input v-model="form.title"></el-input>
        </el-form-item>
        <el-form-item label="文章作者" prop="author">
          <el-input v-model="form.author"></el-input>
        </el-form-item>
        <el-form-item label="作者身份" prop="identify">
          <el-input v-model="form.identify"></el-input>
        </el-form-item>
        <el-form-item label="作者居住地址" prop="location">
          <el-input v-model="form.location"></el-input>
        </el-form-item>
        <el-form-item label="文章分类" prop="type">
          <el-select v-model="form.type" placeholder="请选择文章分类">
            <el-option
              v-for="item in choice"
              :key="item.id"
              :label="item.type"
              :value="item.type"
            ></el-option>
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="page"
              :page-sizes="[1, 2, 5, 10]"
              :page-size="size"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
            >
            </el-pagination>
          </el-select>
        </el-form-item>
        <el-form-item label="图片上传">
          <el-upload
            class="upload-demo"
            action="http://localhost:3000/postadd/img"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            :on-success="handleSUccess"
            :on-preview="handlePreview"
            multiple
            :limit="1"
            :file-list="fileList"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">请上传图片</div>
          </el-upload>
        </el-form-item>

        <el-form-item label="文章内容" class="edit_container">
          <quill-editor
            v-model="form.content"
            ref="myQuillEditor"
            :options="form.editorOption"
          ></quill-editor>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submit('form')">立即修改</el-button>
          <el-button @click="reset('form')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { quillEditor } from 'vue-quill-editor' //调用编辑器
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
export default {
  data() {
    return {
      id: 0,
      choice: [],
      page: 1, //当前的页码数
      size: 5, // 每页显示记录数
      total: 0, // 记录总数
      form: {
        title: '',
        author: '',
        type: '',
        content: ``, // 富文本编辑器默认内容
        editorOption: {}, // 富文本编辑器配置
        imgPath: '',
        identify: '',
        location: '',
      },
      rules: {
        title: [
          { required: true, message: '请输入文章标题', trigger: 'blur' },
          {
            min: 3,
            max: 50,
            message: '长度在3个字符到50个字符中间',
            trigger: 'blur',
          },
        ],
        author: [
          { required: true, message: '请输入文章作者', trigger: 'blur' },
          {
            min: 2,
            max: 20,
            message: '长度在2到30个字符中间',
            trigger: 'blur',
          },
        ],
        type: [
          { required: true, message: '请选择文章分类', trigger: 'change' },
        ],
      },
      fileList: [],
    }
  },
  components: {
    quillEditor,
  },
  created() {
    this.id = this.$route.query.id
    this.getchoice()
    this.getArticle()
    // console.log(this.fileList)
  },
  computed: {
    pages() {
      return Math.ceil(this.total / this.size)
    },
    editor() {
      return this.$refs.myQuillEditor.quill
    },
  },
  methods: {
    getArticle() {
      this.$api.getOneArticle(this.id).then((res) => {
        this.form = res.data.result
        const path = res.data.result.imgPath
        const pathArr = path.split('/')
        const name = pathArr[pathArr.length - 1]
        const list = [{ name, url: path }]
        this.fileList = list
      })
    },
    open(url) {
      this.$alert(
        `<img src="${url}" style="display:inline-block;width:150px;height:112px;margin-left:125px"><img>`,
        '预览图片',
        {
          dangerouslyUseHTMLString: true,
        }
      )
    },
    handlePreview(file) {
      console.log(file)
      console.log(file.url)
      this.open(file.url)
    },
    handleSUccess(res, file, fileList) {
      this.form.imgPath = res.url
    },
    handleRemove(file, fileList) {
      this.$api.delArticlePhoto(this.fileList[0]).then((res) => {
        this.fileList = []
      })
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`)
    },
    getchoice() {
      this.$api.getArticlesType(this.page, this.size).then((res) => {
        this.total = res.data.result.total
        this.choice = res.data.result.data
      })
    },

    handleCurrentChange(p) {
      this.page = p
      this.getchoice()
    },
    handleSizeChange(s) {
      this.size = s
      this.getchoice()
    },
    submit(form) {
      this.$refs[form].validate((valid) => {
        if (this.fileList.length == 0) {
          this.$message.error('图片不能为空')
        } else {
          if (valid) {
            this.$api.putOneArticle(this.id, this.form).then((res) => {
              this.form = {}
              this.fileList = []
              this.$message.success(res.data.message)
              this.$router.push('/post')
            })
          } else {
            this.$message.error('修改文章失败,请稍后再试!')
            return false
          }
        }
      })
    },
    reset(form) {
      this.form = {}
      this.fileList = []
    },
  },
}
</script>

<style scoped>
.user-container {
  min-width: 700px;

  padding: 20px 20px;
  margin-top: 20px;
  background-color: rgba(250, 250, 250, 0.8);
  /* height: 400px; */
}
.el-input__inner {
  width: 50%;
}
.el-form-item__label {
  font-weight: 700;
}
.quill-editor {
  min-height: 200px;
  width: 70%;
  border: none;
  background-color: #fff;
}
/* .qui {
  height: 350px;
}
.formSubmit {
  margin-top: 120px;
}
.footer {
  margin: 100px;
  line-height: 500px;
  text-align: center;
}
quill-editor {
  height: 400px;
} */
</style>
